<template>

<a-modal
      :visible="show"
      width="90vw"
      :bodyStyle="{ padding: '10px' }"
      title="付款节点列表"
      @cancel="show = false"
    >
    <template slot="footer">
      <a-button @click="show = false">关闭</a-button>
    </template>
       <div style="display:flex;justify-content:flex-end">
          
              <a-select v-model="keywordType" style="width:120px">
                <a-select-option value="1"> 合同编号 </a-select-option>
                <a-select-option value="2"> 合同名称 </a-select-option>
              </a-select>
              <a-input-search style="width:200px"
                v-if="keywordType == '1'"
                v-model="searchForm.contractNumber"
                @search="handleSearch"
                placeholder="请按照关键字进行搜索"
              />
              <a-input-search
                v-if="keywordType == '2'"
                v-model="searchForm.contractName"
                @search="handleSearch"
                placeholder="请按照关键字进行搜索"
              />
            <a-button class="hte-btn del-btn" @click="openSearchForm">高级搜索</a-button>
          </div>
        <a-table
          :scroll="{ x: 1800 }"
          class="hte-table-content"
          :columns="columns"
          :data-source="records"
          :pagination="false"
          :loading="tabLoading"
          rowKey="id"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          size="middle"
          bordered
          :customRow="customRow"
          @change="handleTableChange"
          :rowClassName="tableRowClass"
        >
          <span slot="purchaseOrderNumberRender" slot-scope="text, record">
            <span class="font-active" @click="toTaskDetail(record)">
              {{ record.purchaseOrderNumber + '(' + record.itemIndex + '/' + record.itemCount + ')' }}</span
            >
          </span>
          <span slot="complateTimeRender" slot-scope="text, record">
            {{ formatDate(record.complateTime || '', 'yyyy-MM-dd') }}
          </span>
          <span slot="planTimeRender" slot-scope="text, record">
            {{ formatDate(record.partaPlanTime || '', 'yyyy-MM-dd') }}
          </span>
          <span slot="actualTimeRender" slot-scope="text, record">
            {{ formatDate(record.partaActualTime || '', 'yyyy-MM-dd') }}
          </span>
          <template slot="isMutiContiditonRender" slot-scope="text, record">
            <template v-for="(code, index) in codes.IsMutiContiditon">
              <span :key="index" v-if="record.isMutiContiditon == code.code">{{ code.name }}</span>
            </template>
          </template>
          <template slot="isPayNodeRender" slot-scope="text, record">
            <template v-for="(code, index) in codes.IsPayNode">
              <span :key="index" v-if="record.isPayNode == code.code">{{ code.name }}</span>
            </template>
          </template>
          <template slot="statusRender" slot-scope="text, record">
            <span v-for="(code, index) in codes.WorkReportTaskStatus" :key="index">
              <i v-if="record.status == code.code">{{ code.name }}</i>
            </span>
          </template>
          <template slot="paymentStatusRender" slot-scope="text, record">
            <span v-for="(code, index) in codes.WorkReportTaskAcceptStatus" :key="index">
              <i v-if="record.acceptStatus == code.code">{{ code.name }}</i>
            </span>
          </template>

          <template slot="nodeStatusRender" slot-scope="text, record">
            {{ calcNodeStatus(record) }}
          </template>
          <template slot="delayReasonRender" slot-scope="text, record">
            <span v-for="(code, index) in codes.WorkReportDelayReson" :key="index">
              <i v-if="record.partaDelayReason == code.code">{{ code.name }}</i>
            </span>
          </template>
          <template slot="nodeContentRender" slot-scope="text, record">
            <span :class="'contentStyle-' + calcDelayType(record)">
              {{ text }}
            </span>
          </template>
          <template slot="paymentContentRender" slot-scope="text, record">
            <span :class="'contentStyle-' + calcDelayType(record)">
              {{ text }}
            </span>
          </template>
        </a-table>
        <a-pagination
          show-size-changer
          :default-current="1"
          :total="searchForm.total"
          @change="pageChange"
          @showSizeChange="onShowSizeChange"
          :show-total="total => `共 ${total} 条记录`"
        />
    <a-modal
      :visible="showSearchForm"
      width="70vw"
      :bodyStyle="{ padding: '10px' }"
      title="高级查询"
      @ok="handleToSearch"
      @cancel="handleToCancel"
    >
      <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="handleToSearch">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="任务状态">
              <a-select mode="multiple" v-model="searchForm.statusArr" style="width: 100%" allowClear>
                <a-select-option v-for="(code, index) in codes.WorkReportTaskStatus" :key="index" :value="code.code">
                  {{ code.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="合同编号">
              <a-input allow-clear v-model="searchForm.contractNumber" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="合同名称">
              <a-input allow-clear v-model="searchForm.contractName" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="合同跟进专员">
              <a-input allow-clear v-model="searchForm.createOrderUser" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目经理">
              <a-input allow-clear v-model="searchForm.proManager" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="项目负责人">
              <a-input allow-clear v-model="searchForm.followPerson" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="签订公司">
              <a-input allow-clear v-model="searchForm.signCompany" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="供应商名称">
              <a-input allow-clear v-model="searchForm.supplierName" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="合同签订人">
              <a-input allow-clear v-model="searchForm.createUder" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="采购订单号">
              <a-input allow-clear v-model="searchForm.purchaseOrderNumber" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="费用支出号">
              <a-input allow-clear v-model="searchForm.costNumber" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="发起验收">
              <a-select mode="multiple" v-model="searchForm.acceptStatusArr" style="width: 100%" allowClear>
                <a-select-option
                  v-for="(code, index) in codes.WorkReportTaskAcceptStatus"
                  :key="index"
                  :value="code.code"
                >
                  {{ code.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="16">
            <a-form-model-item label="合同约定时间">
              <a-range-picker
                v-model="complateTime"
                :show-time="{ format: 'YYYY-MM-DD' }"
                valueFormat="YYYY-MM-DD"
                format="YYYY-MM-DD"
                :placeholder="['开始时间', '结束时间']"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="工期状态">
              <a-select v-model="searchForm.partaNodeStatus" style="width: 100%" allowClear>
                <a-select-option value="全部">全部</a-select-option>
                <a-select-option value="正常">正常</a-select-option>
                <a-select-option value="逾期">逾期</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
    </a-modal>
</template>
<script>
import { getAction, postAction } from '@/api/manage'
import { formatDate, calcDaysBetween } from '@/utils/util'
import { UtilsMixin } from '@/mixins/UtilsMixin'
import { Modal } from 'ant-design-vue'
export default {
  mixins: [UtilsMixin],
  name: 'ContractTaskList',
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
    RelpaceHandlerUserByTask: () => import('@/views/workReport/util/RelpaceHandlerUserByTask'),
    FixedMenu: () => import('@/views/workReport/home/FixedMenu')
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractTaskList'
      },
      show:false,
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      columns: [
        {
          title: '任务状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'statusRender' },
          width: '130px',
          ellipsis: true
        },
        {
          title: '发起验收',
          dataIndex: 'paymentStatus',
          align: 'center',
          scopedSlots: { customRender: 'paymentStatusRender' },
          width: '110px',
          ellipsis: true
        },
        {
          title: '报工单编号',
          dataIndex: 'itemIndex',
          align: 'center',
          sorter: true,
          scopedSlots: { customRender: 'purchaseOrderNumberRender' },
          width: '160px',
          ellipsis: true
        },
        {
          title: 'PO单行号',
          dataIndex: 'poLine',
          align: 'center',
          width: '80px',
          ellipsis: true
        },
        {
          title: '合同名称',
          dataIndex: 'contractName',
          align: 'center',
          width: '140px',
          ellipsis: true
        },
        {
          title: '工期节点内容',
          dataIndex: 'nodeContent',
          align: 'center',
          width: '140px',
          customCell: () => {
            return {
              style: {
                width: '140px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                cursor: 'pointer'
              }
            }
          },
          customRender: (text, record) => (
            <a-tooltip placement="topLeft" title={record.nodeContent}>
              {record.nodeContent}
            </a-tooltip>
          )
        },
        {
          title: '项目负责人',
          dataIndex: 'handlerUser',
          align: 'center',
          width: '90px',
          ellipsis: true
        },
        {
          title: '合同约定日期',
          dataIndex: 'complateTime',
          align: 'center',
          scopedSlots: { customRender: 'complateTimeRender' },
          width: '100px',
          ellipsis: true
        },
        {
          title: '实际完成日期',
          dataIndex: 'partaActualTime',
          align: 'center',
          scopedSlots: { customRender: 'actualTimeRender' },
          width: '100px',
          ellipsis: true
        },
        {
          title: '预计完成日期',
          dataIndex: 'planTime',
          align: 'center',
          scopedSlots: { customRender: 'planTimeRender' },
          width: '100px',
          ellipsis: true
        },
        {
          title: '是否逾期',
          dataIndex: 'nodeStatus',
          align: 'center',
          width: '80px',
          ellipsis: true,
          scopedSlots: { customRender: 'nodeStatusRender' }
        },
        {
          title: '逾期责任方',
          dataIndex: 'delayReason',
          align: 'center',
          width: '90px',
          ellipsis: true,
          scopedSlots: { customRender: 'delayReasonRender' }
        },
        {
          title: '付款节点内容',
          dataIndex: 'paymentContent',
          align: 'center',
          width: 'left',
          width: '140px',
          customCell: () => {
            return {
              style: {
                width: '140px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                cursor: 'pointer'
              }
            }
          },
          customRender: (text, record) => (
            <a-tooltip placement="topLeft" title={record.paymentContent}>
              {record.paymentContent}
            </a-tooltip>
          )
        },
        {
          title: '付款节点',
          dataIndex: 'isPayNode',
          align: 'center',
          scopedSlots: { customRender: 'isPayNodeRender' },
          width: '75px',
          ellipsis: true
        },
        {
          title: '多个付款节点',
          dataIndex: 'isMutiContiditon',
          align: 'center',
          scopedSlots: { customRender: 'isMutiContiditonRender' },
          width: '100px',
          ellipsis: true
        },
        {
          title: '合同金额',
          dataIndex: 'amount',
          align: 'center',
          width: '80px',
          ellipsis: true
        },
        {
          title: '关联节点金额',
          dataIndex: 'paymentAmount',
          align: 'center',
          width: '100px',
          ellipsis: true
        },
        {
          title: '税率',
          dataIndex: 'taxRate',
          align: 'center',
          width: '100px',
          ellipsis: true
        },
        {
          title: '费用号',
          dataIndex: 'costNumber',
          align: 'center',
          width: '120px',
          ellipsis: true
        },
        {
          title: '合同编号',
          dataIndex: 'contractNumber',
          align: 'center',
          width: '130px',
          ellipsis: true
        },
        {
          title: '节点标识',
          dataIndex: 'nodeIdentify',
          width: '22%',
          align: 'center',
          width: '80px',
          ellipsis: true
        }
      ],
      records: [],
      selectedRowKeys: [],
      selectedRow: [],
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      searchForm: {
        total: 0,
        pageNo: 1,
        pageSize: 10
      },
      tabLoading: false,
      currPageIndex: 1,
      currPageSize: 10,
      keyword: '',
      keywordType: '1',
      showSearchForm: false,
      myTaskCount: 0,
      urls: {
        codes: '/manage/codeInfo/queryByTypes',
        psCodes: '/hte/contract/codes',
      },
      codes: {},
      permission: [],
      showRelpaceHandlerUserByTask: false,
      isPayNode: '1',
      showIsPayNode: false,
      executeStatus: '5',
      showExecuteStatus: false,
      complateTime: [],
      projectId:null
    }
  },
  computed: {
   
  },
  mounted() {
    

    this.fetchCodes()
    this.fetchPsCodes()
  },
  methods: {
    open(projectId){
      this.show = true
      this.projectId = projectId
      this.getTaskList()
    },
    calcDaysBetween,
    formatDate,
    fetchPsCodes() {
      postAction(this.urls.psCodes, { codes: ['contract_status'] }).then(res => {
        if (res.success) {
          this.codes = { ...this.codes, ...res.result }
        }
      })
    },
    fetchCodes() {
      getAction(this.urls.codes, {
        types: 'WorkReportTaskStatus,IsPayNode,IsMutiContiditon,WorkReportDelayReson,WorkReportTaskAcceptStatus'
      }).then(res => {
        if (res.success) {
          this.codes = { ...this.codes, ...res.result }
        }
      })
    },
    pageChange(pageNo, pageSize) {
      this.$set(this.searchForm, 'pageSize', pageSize)
      this.$set(this.searchForm, 'pageNo', pageNo)
      this.getTaskList()
    },
    handleTableChange(searchForm, filters, sorter) {
      this.$set(this.searchForm, 'sortField', 'item_index')
      this.$set(this.searchForm, 'sortOrder', sorter.order)
      this.getTaskList()
    },
    /**
     * 查询
     */
    handleSearch() {
      this.getTaskList()
    },
    changeKeyorkType() {
      if (this.keywordType == '1') {
        this.$set(this.searchForm, 'contractName', '')
      } else {
        this.$set(this.searchForm, 'contractNumber', '')
      }
    },
    handleToSearch() {
      this.onShowSizeChange()
    },
    handleToCancel() {
      this.showSearchForm = false
    },
    openSearchForm() {
      this.showSearchForm = true
    },
    /**
     * 查询
     */
    getTaskList() {
      this.tabLoading = true
      if (this.complateTime[0]) {
        this.$set(this.searchForm, 'complateTimeStart', this.complateTime[0])
      }
      if (this.complateTime[1]) {
        this.$set(this.searchForm, 'complateTimeEnd', this.complateTime[1])
      }
      if (this.searchForm.statusArr) {
        this.$set(this.searchForm, 'status', this.searchForm.statusArr.join(','))
      } else {
        this.$set(this.searchForm, 'status', '')
      }
      if (this.searchForm.acceptStatusArr) {
        this.$set(this.searchForm, 'acceptStatus', this.searchForm.acceptStatusArr.join(','))
      } else {
        this.$set(this.searchForm, 'acceptStatus', '')
      }
      this.$set(this.searchForm, 'projectCode', this.projectCode)
      this.$set(this.searchForm, 'projectId', this.projectId)
      postAction('/workReport/task/page', this.searchForm).then(res => {
        if (res.code == 200 && res.result) {
          this.selectedRowKeys = []
          this.selectedRow = []
          this.searchForm.total = res.result.total
          res.result.records.forEach((r, index) => {
            r.key = this.taskFlag + index

            if (r.isPayNode != '1' && r.nodeIdentify != '验收') {
              r.paymentStatus = '0'
            }
            if (
              (r.isPayNode == '1' || r.nodeIdentify != '验收') &&
              ['0', '1', '2', '3', '4', '5'].indexOf(r.status) > -1
            ) {
              r.paymentStatus = '1'
            }
            if (
              (r.isPayNode == '1' || r.nodeIdentify != '验收') &&
              ['6', '7', '8'].indexOf(r.status) > -1 &&
              r.paymentCount <= 0
            ) {
              r.paymentStatus = '2'
            }
            if (
              (r.isPayNode == '1' || r.nodeIdentify != '验收') &&
              ['6', '7', '8'].indexOf(r.status) > -1 &&
              r.paymentCount > 0 &&
              r.paymentCountActive <= 0
            ) {
              r.paymentStatus = '3'
            }
            if (
              (r.isPayNode == '1' || r.nodeIdentify != '验收') &&
              ['6', '7', '8'].indexOf(r.status) > -1 &&
              r.paymentCount > 0 &&
              r.paymentCountActive > 0
            ) {
              r.paymentStatus = '4'
            }
          })
          this.records = res.result.records
          this.tabLoading = false
        } else {
          this.$messageWorkReport.warning('数据加载失败:' + res.message)
          this.tabLoading = false
        }
        this.showSearchForm = false
      })
    },
    /**
     * 查询
     */
    getMyTaskCount() {
      let params = {}
      postAction('/workReport/task/myPage', params).then(res => {
        if (res.code == 200 && res.result) {
          this.myTaskCount = res.result.total
        }
      })
    },

    doSearch() {
      this.$set(this.searchForm, 'pageNo', 1)
      this.getTaskList()
    },
    onSelectChange(selectedRowKeys, selectedRow) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRow = selectedRow
    },
    customRow(record) {
      return {
        on: {
          dblclick: event => {
            window.open('/workReport/taskDetail/' + record.id)
          }
        }
      }
    },
    toTaskDetail(record) {
      let urlJump = this.$router.resolve({ path:'/workReport/taskDetail/' + record.id })
          window.open(urlJump.href, '_blank')
    },
    
    onShowSizeChange(pageNo, pageSize) {
      this.$set(this.searchForm, 'pageSize', pageSize)
      this.$set(this.searchForm, 'pageNo', 1)
      this.getTaskList()
    },
    calcDelayType(record) {
      let _now = new Date()
      let complateTime = new Date(record.complateTime)
      if (!record.resultStatus || record.resultStatus == '0') {
        if (_now >= complateTime) {
          return 'red'
        }
        let expire = complateTime - _now
        if (expire <= 7 * 24 * 60 * 60 * 1000) {
          return 'yellow'
        }
      }
      if (record.resultStatus == '1') {
        let planTime = new Date(record.planTime)
        if (_now >= planTime) {
          return 'red'
        }
        let expire = planTime - _now
        if (expire <= 7 * 24 * 60 * 60 * 1000) {
          return 'yellow'
        }
      }
      return 'default'
    },
    calcNodeStatus(record) {
      let endTime = new Date()
      if (record.partaStatus == '2') {
        endTime = record.partaActualTime ? record.partaActualTime + ' 23:59:59.999' : ''
      }
      let temp = this.calcDaysBetween(record.complateTime + ' 23:59:59.999', endTime)
      this.$set(record, 'partaNodeStatus', temp.status)
      if (temp.status != '正常') {
        this.$set(record, 'partaNodeDelayDays', temp.days)
        return record.partaNodeStatus + temp.days + '天'
      } else {
        this.$set(record, 'partaNodeDelayDays', 0)
        return record.partaNodeStatus
      }
    },
    tableRowClass(record, index) {
      if (parseInt(record.status) < 6) {
        if (new Date(record.complateTime) < new Date()) {
          return 'redRow'
        } else {
          var startDate = new Date(record.complateTime).getTime()
          var now = new Date()
          now.setHours(0)
          now.setMinutes(0)
          now.setSeconds(0)
          var endDate = now.getTime()
          var days = startDate - endDate
          if (days <= 15 * 86400 * 1000) {
            return 'greenRow'
          }
        }
      }
    },
  },
  watch:{
  }
}
</script>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .banner {
    background-image: url(~@assets/contract-top.png);
  }
  .container {
    .content-list {
      margin-top: 15px;
    }
  }
  .font-active {
    cursor: pointer;
  }
}
.contentStyle-default {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contentStyle-red {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: red;
}
.contentStyle-yellow {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: burlywood;
}
/deep/.greenRow {
  color: green;
}
/deep/.redRow {
  color: red;
}
</style>
